<!--  -->
<template>
  <div class="dialog-edit-product-label" v-if="dialogShow">
    <SetDesignDialog :title="'产品标签设置'" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" :hasfooter="false" :zIndex="1000"
      ref="settingDialog">
      <div class="dlg-main-box">
        <el-table :data="productLabels" style="width: 100%" v-loading="loading">
          <el-table-column prop="name" label="标签名称">
          </el-table-column>
          <el-table-column label="操作" align="center" width="80px">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row.name)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </SetDesignDialog>
    <EditorProductLabelName ref="editorLabelName" :resetData='resetData' />
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import EditorProductLabelName from '@/components/main/user/system/product/label/EditorProductLabelName.vue'
import { mapGetters } from 'vuex'
export default {
  created () {
  },
  data () {
    return {
      dialogShow: true,
      loading: true,
      systemId: null,
      productLabels: []
    }
  },
  computed: {
    ...mapGetters(['currentMenu', 'currentSite'])
  },
  mounted () {
    this.dialogShow = false
  },
  methods: {
    show (sysid) {
      this.dialogShow = true
      this.systemId = sysid
      this.loading = true
      // 获取所有的域名
      this.$post('/system/product/label-title/infos', {systemId: this.systemId}).then(response => {
        if (response && response.length > 0) {
          let labels = response
          this.productLabels = []
          labels.forEach(item => {
            let obj = {}
            obj.name = item
            this.productLabels.push(obj)
          })
        } else {
          this.productLabels = []
        }
        this.loading = false
      })
    },
    // 关闭弹出层
    close () {
      this.dialogShow = false
    },
    saveclose () {
      this.close()
    },
    // 弹窗居中
    openCenter () {
      if (this.$refs['settingDialog']) {
        this.$refs['settingDialog'].open()
      }
    },
    edit (name) {
      this.$refs['editorLabelName'].show(this.systemId, name)
    },
    resetData (data) {
      if (data && data.length > 0) {
        let labels = data
        this.productLabels = []
        labels.forEach(item => {
          let obj = {}
          obj.name = item
          this.productLabels.push(obj)
        })
      } else {
        this.productLabels = []
      }
    }
  },
  components: {
    SetDesignDialog,
    EditorProductLabelName
  }
}
</script>

<style scoped lang="scss">
.dlg-main-box {
  height: 450px;
  max-height: calc(100vh - 190px);
  /deep/ .el-table th {
  color: #555;
 }
}
.dlg-main-box /deep/ {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .is-horizontal{
    display: none;
  }
}
</style>
